<!--
  ~ Copyright (c) 2020 the original author or authors
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      https://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  ~ or implied. See the License for the specific language governing
  ~ permissions and limitations under the License.
  -->
<div class="collection-right-container" infiniteScroll [scrollWindow]="scrollWindow" (scrolled)="onScrollDown()">
  <ng-container *ngIf="!isPending; else spinner">
    <ng-container *ngIf="subject; else emptySubject">
      <div class="profile">
        <div class="profile--header">
          <div class="profile--header_profile">
            <div class="name">{{ 'manage_collection.right_side.profile' | translate }} {{ subject }}</div>
            <div class="buttons" [ngSwitch]="mode">
              <ng-container *ngSwitchCase="subjectModeEnum.BulkSelect" [ngTemplateOutlet]="bulkButtons"></ng-container>
              <ng-container *ngSwitchDefault [ngTemplateOutlet]="defaultButtons"></ng-container>
            </div>
          </div>
          <div class="profile--header_examples" [ngSwitch]="mode">
            <ng-container *ngSwitchCase="subjectModeEnum.BulkSelect"
              >{{ 'manage_collection.right_side.selected_examples' | translate }} {{ selectedIds.length }}</ng-container
            >
            <ng-container *ngSwitchDefault>{{ 'manage_collection.right_side.examples' | translate }} {{ totalElements }}</ng-container>
          </div>
        </div>
      </div>
      <div class="drag-and-drop-container">
        <app-drag-n-drop
          [title]="'dnd.title' | translate: { typeImage: 'dnd.image' | translate }"
          [label]="'dnd.label' | translate"
          (upload)="readFiles.emit($event)"
          inline
        >
        </app-drag-n-drop>
      </div>
      <div class="image-holder-collection-container">
        <div class="image-holder-collection-container--spinner" *ngIf="isCollectionPending">
          <app-spinner></app-spinner>
        </div>
        <image-holder-collection
          *ngIf="!isCollectionPending"
          [items]="collectionItems"
          [selectionMode]="mode === subjectModeEnum.BulkSelect"
          (deleteItem)="deleteItem.emit($event)"
          (cancelUploadItem)="cancelUploadItem.emit($event)"
          (selectItem)="selectExample.emit($event)"
        >
        </image-holder-collection>
      </div>
    </ng-container>
  </ng-container>
</div>

<ng-template #spinner>
  <div class="spinner">
    <app-spinner></app-spinner>
  </div>
</ng-template>

<ng-template #emptySubject>
  <div class="emptyMessage">{{ 'manage_collection.right_side.empty_message' | translate }}</div>
</ng-template>

<ng-template #defaultButtons>
  <button
    mat-icon-button
    [disabled]="isCollectionOnHold"
    (click)="editSubject.emit(subject)"
    class="control-button"
    [title]="'manage_collection.right_side.control_button_edit_title' | translate"
  >
    <mat-icon
      svgIcon="edit"
      [matTooltipPosition]="'above'"
      [matTooltipDisabled]="!isCollectionOnHold"
      [matTooltip]="'manage_collection.right_side.control_button_tooltip' | translate"
      class="control-icon"
    ></mat-icon>
  </button>

  <button
    mat-icon-button
    [disabled]="isCollectionOnHold"
    (click)="deleteSubject.emit(subject)"
    class="control-button"
    [title]="'manage_collection.right_side.control_button_delete_title' | translate"
  >
    <mat-icon
      svgIcon="trash"
      [matTooltipPosition]="'above'"
      [matTooltipDisabled]="!isCollectionOnHold"
      [matTooltip]="'manage_collection.right_side.control_button_tooltip' | translate"
      class="control-icon"
    ></mat-icon>
  </button>

  <button
    mat-icon-button
    [disabled]="isCollectionOnHold"
    (click)="setMode.emit(subjectModeEnum.BulkSelect)"
    class="control-button"
    [title]="'manage_collection.right_side.control_button_bulk-select_title' | translate"
  >
    <mat-icon
      [matTooltipPosition]="'above'"
      [matTooltipDisabled]="!isCollectionOnHold"
      [matTooltip]="'manage_collection.right_side.control_button_tooltip' | translate"
      class="control-icon"
      >library_add_check</mat-icon
    >
  </button>
</ng-template>

<ng-template #bulkButtons>
  <button
    mat-icon-button
    (click)="deleteSelectedExamples.emit(selectedIds)"
    [disabled]="!selectedIds.length"
    class="control-button"
    [title]="'manage_collection.right_side.control_button_bulk-delete_title' | translate"
  >
    <mat-icon class="control-icon control-icon_delete-bulk" color="warn">delete_outline</mat-icon>
  </button>
  <button
    mat-icon-button
    (click)="setMode.emit(subjectModeEnum.Default)"
    class="control-button"
    [title]="'manage_collection.right_side.control_button_bulk-select-exit_title' | translate"
  >
    <mat-icon class="control-icon">indeterminate_check_box</mat-icon>
  </button>
</ng-template>
